




//选项卡大
$(".tab ul li").click(function() {
    $(this).addClass("btn")
        .siblings()
        .removeClass("btn");

    var index = $(this).index();
    $(".con .con-1").eq(index)
        .addClass("active") 
        .siblings()
        .removeClass("active");
});
//选项卡2
$(".tab2 ul li").click(function() {
    $(this).addClass("btn2")
        .siblings()
        .removeClass("btn2");

    var index2 = $(this).index();
    $(".con2 .con-2").eq(index2)
    .addClass("active2")
    .siblings()
    .removeClass("active2");
    console.log($(".con2 .con-2"))
});


//选项卡3
$(".tab3 ul li").click(function() {
    $(this).addClass("btn3")
        .siblings()
        .removeClass("btn3");

    var index3 = $(this).index();
    $(".con3 .con-3").eq(index3)
        .addClass("active3")
        .siblings()
        .removeClass("active3");
});
//选项卡4
$(".tab4 ul li").click(function() {
    $(this).addClass("btn4")
        .siblings()
        .removeClass("btn4");

    var index4 = $(this).index();
    $(".con4 .con-4").eq(index4)
        .addClass("active4")
        .siblings()
        .removeClass("active4");
});

//小轮播
// 1.获取元素
let ul = document.getElementsByClassName('minbox')[0]; //ul
let lis = document.querySelectorAll('.minbox li');  //ul下面的li
let box = document.getElementsByClassName('maxbox')[0];  //大盒子
let liwidth = lis[0].offsetWidth;// 2.(li的宽度)获取单个轮播图的宽度
let ulwidth = liwidth * lis.length;
ul.style.width = ulwidth + 'px' // 3.设置ul的宽度
console.log(ulwidth +"px")
let index = 0;
var test1 = setInterval(function(){     //定时器
    index++;

    let left = -index * liwidth;  //计算运动的距离
    console.log(left+"px")

    ul.style.left = left + 'px';

    if(index == lis.length){    
        index = 0;
        ul.style.left = '0px'
    }
},5000)


//小轮播2
// 1.获取元素
let ul2 = document.getElementsByClassName('minbox2')[0]; //ul
let lis2 = document.querySelectorAll('.minbox2 li');  //ul下面的li
let box2 = document.getElementsByClassName('maxbox2')[0];  //大盒子
let liwidth2 = lis2[0].offsetWidth;// 2.(li的宽度)获取单个轮播图的宽度
//
let ulwidth2 = liwidth2 * lis2.length;
ul2.style.width = ulwidth2 + 'px' // 3.设置ul的宽度
let index2 = 0;
var test12 = setInterval(function(){     //定时器
    index2++;

    let left2 = -index2 * liwidth2;  //计算运动的距离
    console.log(left2)

    ul2.style.left = left2 + 'px';

    if(index2 == lis2.length){    
        index2 = 0;
        ul2.style.left = '0px'
    }
},5000)


//小轮播3
// 1.获取元素
let ul3 = document.getElementsByClassName('minbox3')[0]; //ul
let lis3 = document.querySelectorAll('.minbox3 li');  //ul下面的li
let box3 = document.getElementsByClassName('maxbox3')[0];  //大盒子
let liwidth3 = lis3[0].offsetWidth;// 2.(li的宽度)获取单个轮播图的宽度
//
let ulwidth3 = liwidth3 * lis3.length;
ul3.style.width = ulwidth3 + 'px' // 3.设置ul的宽度
let index3 = 0;
var test13 = setInterval(function(){     //定时器
    index3++;

    let left3 = -index3 * liwidth2;  //计算运动的距离
    console.log(left3)

    ul3.style.left = left3 + 'px';

    if(index3 == lis3.length){    
        index3 = 0;
        ul3.style.left = '0px'
    }
},5000)

//小轮播4
// 1.获取元素
let ul4 = document.getElementsByClassName('minbox4')[0]; //ul
let lis4 = document.querySelectorAll('.minbox4 li');  //ul下面的li
let box4 = document.getElementsByClassName('maxbox4')[0];  //大盒子
let liwidth4 = lis4[0].offsetWidth;// 2.(li的宽度)获取单个轮播图的宽度
//
let ulwidth4 = liwidth4 * lis4.length;
ul4.style.width = ulwidth4 + 'px' // 3.设置ul的宽度
let index4 = 0;
var test14 = setInterval(function(){     //定时器
    index4++;

    let left4 = -index4 * liwidth4;  //计算运动的距离
    console.log(left4)

    ul4.style.left = left4 + 'px';

    if(index4 == lis4.length){    
        index4 = 0;
        ul4.style.left = '0px'
    }
},5000)
